<template>
  <div class="singer_container">
    <div class="header_bar"
      :style="{ background: background }"
      :class="{ dark: isDark }">
      <div class="back_button">
        <div class="back_text">歌手</div>
      </div>
    </div>
    <div class="singer_photo">
      <img v-lazy="imgurl">
    </div>
    <div id="singer_header" class="singer_header border-1px border-1px-after"
      v-if="singer!==null">
      <div class="header_blank"></div>
      <div class="header_wrap"
        :style="{ background: gradientcolor }">
        <div class="header_info" :class="{ dark: isDark }">
          <h1 class="info_name">{{ singer.singer_name }}</h1>
          <p class="info_fanscount" :class="{ dark: isDark }">
            粉丝：{{ singer.fans }}
          </p>
        </div>
        <div class="play_button" @click="play(0)">
          <img src="/static/images/icon-play.png" alt="play">
        </div>
      </div>
    </div>

    <div class="list" :style="{ background: color }"
      v-if="singer!==null">
      <div class="list_title" :class="{ dark: isDark }">
        <p :class="{ dark: isDark }">热门单曲</p>
      </div>
      <ul>
        <li class="border-1px border-1px-after"
          v-for="(song, index) in singer.list" :key="index">
          <div class="info" @click="play(index)">
            <div class="name" :class="{ dark: isDark }">
              {{ song.musicData.songorig }}
            </div>
            <div class="singer">
              <span v-for="singername in song.musicData.singer" :key="singername.id">
                {{ singername.name }}-
              </span>
              <span>{{ song.musicData.albumname }}</span>
            </div>
          </div>
          <div class="action_button" @click="showMenu(index)">
            <img src="/static/images/icon-...black.png" alt="action_button">
          </div>
        </li>
      </ul>
      <div class="list_title" :class="{ dark: isDark }">
        <p :class="{ dark: isDark }">简介</p>
      </div>
      <div class="singer_brief" :class="{ dark: isDark }">
        <p :class="{ dark: isDark }">{{ singer.SingerDesc }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'singer',
  data() {
    return {
      singer: null,
      id: this.$route.params.id,
      opacity: 0
    }
  },
  methods: {
    play(index) {
      const list = []
      this.singer.list.forEach(item => {
        list.push({
          id: item.musicData.songid,
          mid: item.musicData.songmid,
          name: item.musicData.songorig,
          singer: item.musicData.singer,
          albummid: item.musicData.albummid
        })
      })
      this.$store.commit('setPlayList', {
        index,
        list
      })
      this.$store.commit('play')
    },
    showMenu(index) {
      const that = this
      const options = {
        id: this.singer.list[index].musicData.songid,
        mid: this.singer.list[index].musicData.songmid,
        name: this.singer.list[index].musicData.songorig,
        singer: this.singer.list[index].musicData.singer,
        albummid: this.singer.list[index].musicData.albummid
      }

      this.$store.dispatch('notifyActionSheet', {
        menus: {
          'title.noop': this.singer.list[index].musicData.songorig +
                        `<br><span style="color:#666;font-size:12px">
                        ${this.getSingerStr(this.singer.list[index].musicData.singer)}</span>`,
          playAsNext: '下一首播放',
          addToPlayList: '添加到播放列表'
        },
        handler: {
          ['cancel']() {},
          ['playAsNext']() {
            that.$store.commit('addToPlayListAsNextPlay', options)
          },
          ['addToPlayList']() {
            that.$store.commit('addToPlayList', options)
          }
        }
      })
    },
    getSingerStr(val) {
      if(typeof val === 'string') {
        return val
      } else if(val instanceof Array) {
        let singer = ''
        val.forEach(item => {
          singer = singer + item.name + ' '
        })
        return singer
      }
    }
  },
  mounted() {
    window.scrollTo(0, 0)
  },
  created() {
    this.$store.dispatch('getSingerInfo', this.id).then(res => {
      this.singer = res.data.data
    })

    const that = this
    window.onscroll = function() {
      const div = document.getElementById('singer_header')
      if(div) {
        that.opacity = window.pageYOffset / div.offsetHeight
      } else {
        that.opacity = 0
      }
    }
  },
  computed: {
    imgurl() {
      return `http://y.gtimg.cn/music/photo_new/T001R300x300M000${this.id}.jpg?max_age=2592000`
    },
    color() {
      if(this.singer!== null) {
        let fixed = '00000' + this.singer.color.toString(16)
        return '#' + fixed.substr(fixed.length - 6)
      }else {
        return '#ffffff'
      }
    },
    r() {
      return parseInt(this.color.slice(1,3), 16)
    },
    g() {
      return parseInt(this.color.slice(3,5), 16)
    },
    b() {
      return parseInt(this.color.slice(5,7), 16)
    },
    background() {
      return `rgba(${this.r},${this.g},${this.b},${this.opacity})`
    },
    gradientcolor() {
      return `-webkit-linear-gradient(top, rgba(${this.r},${this.g},${this.b},0), ${this.color})`
    },
    isDark() {
      let grayLevel = this.r * 0.299 + this.g * 0.587 + this.b * 0.114
      return ( grayLevel < 192 ) 
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.singer_container {
  width: 100%;
  max-width: 68vh;
  min-height: 100%;
  padding-bottom: 100px;
  background: #fff;
  overflow: hidden;
  position: absolute;
  top: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  .header_bar {
    width: 100%;
    max-width: 68vh;
    height: 50px;
    position: fixed;
    top: 40px;
    z-index: 2;
    .back_button {
      height: 25px;
      margin: 12.5px;
      margin-left: 15px;
      float: left;
      .back_text {
        line-height: 25px;
        float: left;
      }
    }
  }
  .singer_photo {
    width: 100%;
    max-width: 68vh;
    height: 100vw;
    max-height: 68vh;
    position: absolute;
    img {
      width: 100%;
      max-width: 68vh;
      height: 100vw;
      max-height: 68vh;
    }
  }
  .singer_header {
    width: 100%;
    max-width: 68vh;
    height: 100vw;
    max-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    .header_blank {
      flex: 1;
    }
    .header_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      .header_info {
        h1 {
          font-size: 32px;
          margin-bottom: 3px;
        }
        .info_fanscount {
          color: #000;
          font-size: 16px;
        }
      }
      .play_button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid rgb(214, 113, 113);
        background: rgba(255, 255, 255, .43);
        cursor: pointer;
        img {
          width: 25px;
          height: 25px;
          margin-left: 3px;
        }
      }
    }
  }
  .list {
    .list_title {
      text-align: center;
      line-height: 40px;
      p {
        font-size: 16px;
        color: #000;
      }
    }
    .singer_brief {
      padding: 10px;
      p {
        color: #000;
      }
    }
    ul {
      list-style: none;
      padding-left: 10px;
      li {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        .info {
          display: flex;
          flex-direction: column;
          flex: 1;
          overflow: hidden;
          .name {
            line-height: 22px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .singer {
            font-size: 14px;
            color: #aaa;
            line-height: 22px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
        .action_button {
          width: 25px;
          height: 25px;
          margin-right: 10px;
          img {
            width: 25px;
            height: 25px;
          }
        }
      }
    }
  }
}

.dark {
  color: #fff !important;
}
.border-1px {
  position: relative;
}
.border-1px::before {
  top: 0;
}
.border-1px::after {
  bottom: 0;
}
.border-1px-after::after {
  content: '';
  display: block;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .15);
  position: absolute;
  left: 0;
}
</style>
